<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="35%"
    :before-close="handleClose"
  >
    <el-form ref="ruleForm" :model="formData" :rules="rules" :inline="true" label-width="85px" style="margin-left: 5%" label-position="right" size="small">
      <el-form-item label="立刻发布" style="width: 150%">
        <el-radio-group v-model="formData.release">
          <el-radio label="true">是</el-radio>
          <el-radio label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否原创" style="width: 150%">
        <el-radio-group v-model="formData.original">
          <el-radio label="true">是</el-radio>
          <el-radio label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入文章标题" clearable style="width: 150%" />
      </el-form-item>
      <el-form-item label="文章作者">
        <el-input v-model="formData.author" placeholder="请输入文章作者" clearable style="width: 150%" />
      </el-form-item>
      <el-form-item label="公众号名称">
        <el-input v-model="formData.public_name" placeholder="请输入公众号名称" clearable style="width: 150%" />
      </el-form-item>
      <el-form-item label="公众号链接">
        <el-input v-model="formData.public" placeholder="请输入公众号链接" clearable style="width: 150%" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="formData.release_time"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 141%"
        />
      </el-form-item>
      <el-form-item>
        <vue-ueditor-wrap v-model="formData.content" :config="UEconfig" />
      </el-form-item>
      <el-form-item label="阅读">
        <el-input v-model="formData.reading" placeholder="请输入阅读数量" clearable style="width: 150%" @change="isReading" />
      </el-form-item>
      <el-form-item label="点赞">
        <el-input v-model="formData.like" placeholder="请输入点赞数量" clearable style="width: 150%" @change="isLike" />
      </el-form-item>
      <el-form-item label="在看">
        <el-input v-model="formData.look" placeholder="请输入在看数量" clearable style="width: 150%" @change="isLook" />
      </el-form-item>
      <el-form-item label="广告主">
        <el-input v-model="formData.advertisers" placeholder="请输入广告主连接" clearable style="width: 150%" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" v-text="isBtnCloseTitle" />
      <el-button v-show="isEdit !== 'view'" type="primary" @click="SubmitForm" v-text="isBtnConfTitle" />
    </span>
  </el-dialog>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import { viewMenu, addMenu, editMenu } from '@/api/menu'

export default {
  components: { VueUeditorWrap },
  // 接收父组件传递过来的值
  props: {
    vdialog: {
      type: Boolean,
      default: false
    },
    vtitle: {
      type: String,
      default: ''
    },
    visedit: {
      type: String,
      default: ''
    },
    vformid: {
      // 接收父组件传过来的ID
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // UEditor配置项
      UEconfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: process.env.VUE_APP_BASE_API + 'UEditorUpload/',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/UEditor/'
      },
      // 控制弹出框的显示与隐藏
      dialogVisible: false,
      title: '',
      isBtnCloseTitle: '',
      isBtnConfTitle: '',
      formData: { title: '', content: '文章正文' },
      isEdit: '',
      formId: '',
      formDataBak: '',
      treeMenu: [],
      // rules 表单前验证
      rules: {
        title: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 监听 父组件传递过来的props内的值并改变/赋值
    vdialog() {
      // dialogVisible 弹框的显示与隐藏
      this.dialogVisible = this.vdialog
      if (this.dialogVisible) {
        // formid 数据ID
        this.formid = this.vformid
        // isEdit 表单状态
        this.isEdit = this.visedit
        // title 弹框的标题
        this.title = this.vtitle
        // 状态判断
        if (this.isEdit === 'view') {
          this.isBtnCloseTitle = '关闭'
          this.viewForm()
        } else if (this.isEdit === 'add') {
          this.isBtnCloseTitle = '取消'
          this.isBtnConfTitle = '新增'
        } else if (this.isEdit === 'edit') {
          this.isBtnCloseTitle = '取消'
          this.isBtnConfTitle = '编辑'
          this.viewForm()
        }
      }
    }
  },
  methods: {
    viewForm() {
      viewMenu(this.formid).then(res => {
      })
    },
    SubmitForm() {
      // 表单验证并新增/编辑
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // 判断目录树是否有数据，有则截取数值 (this.formData.pid[1] 这里改成取最后一个值)
          if (this.formData.pid) {
            this.formData.pid = this.rulesPid
          }
          if (this.isEdit === 'add') {
            this.addForm()
          } else if (this.isEdit === 'edit') {
            this.editForm()
          } else {
            this.$notify.warning({
              type: 'warning',
              title: '警告',
              message: '表单非法操作',
              showClose: true,
              duration: 0
            })
          }
        }
      })
    },
    addForm() {
      addMenu(this.formData).then((res) => {
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: res.message,
          showClose: true,
          duration: 5 * 1000
        })
        this.isEditStatus()
        // $parent 子组件调用父组件方法
        this.$parent.getList()
      })
    },
    editForm() {
      editMenu(this.formid, this.formData).then((res) => {
        this.$notify.success({
          type: 'success',
          title: '成功',
          message: res.message,
          showClose: true,
          duration: 5 * 1000
        })
        this.isEditStatus()
        // $parent 子组件调用父组件方法
        this.$parent.getList()
      })
    },
    // 弹出框关闭后的函数
    handleClose(done) {
      // 子组件调用父组件方法，并传递参数 this.$emit('父组件的方法', '传递的参数')
      if (this.isEdit === 'view') {
        this.isEditStatus()
      } else {
        if (this.formData.username) {
          this.$confirm('确认取消/关闭？')
            .then(_ => {
              this.isEditStatus()
              done()
            })
            .catch(_ => {})
        } else {
          this.isEditStatus()
        }
      }
    },
    isEditStatus() {
      // this.$refs['form表单里面的ref值'].resetFields()
      this.$refs['ruleForm'].resetFields()
      this.formData = { title: '' }
      this.$emit('changeShow', 'false', 0)
    },
    // 弹出框关闭后的函数
    isReading(event) {
      let fix
      if (typeof this.formData.reading === 'string') {
        fix = Number(this.formData.reading.replace(/\D/g, ''))
      }
      if (this.formData.reading < 1) {
        fix = 0
      }
      this.formData.reading = fix
    },
    isLike(event) {
      let fix
      if (typeof this.formData.like === 'string') {
        fix = Number(this.formData.like.replace(/\D/g, ''))
      }
      if (this.formData.like < 1) {
        fix = 0
      }
      this.formData.like = fix
    },
    isLook(event) {
      let fix
      if (typeof this.formData.look === 'string') {
        fix = Number(this.formData.look.replace(/\D/g, ''))
      }
      if (this.formData.look < 1) {
        fix = 0
      }
      this.formData.look = fix
    }
  }
}
</script>
